<template>
  <el-card shadow="never" body-style="height:433px">
    <div slot="header" class="flex-between">
      <span class="titleCard">数据统计</span>
      <div
        :class="['ele-inline-block', { 'hidden-sm-and-down': styleResponsive }]"
        style="width: 260px; margin-left: 10px"
      >
        <el-date-picker
          unlink-panels
          type="daterange"
          class="ele-fluid"
          end-placeholder="结束日期"
          start-placeholder="开始日期"
          :default-time="['00:00:00', '23:59:59']"
          value-format="yyyy-MM-ddTHH:mm:ss"
          v-model="saleSearch.datetime"
          range-separator="至"
          size="small"
        />
      </div>
    </div>

    <el-divider />
    <el-row>
      <el-col v-bind="styleResponsive ? { lg: 18, md: 16 } : { span: 18 }">
        <div class="demo-monitor-title">
          <span v-if="saleSearch.type === 'saleroom'">销售额趋势</span>
          <span v-else>访问量趋势</span>
        </div>
        <v-chart
          ref="saleChart"
          style="height: 350px; width: 600px"
          :option="saleChartOption"
        />
      </el-col>
    </el-row>
  </el-card>
</template>

<script>
  import { use } from 'echarts/core';
  import { CanvasRenderer } from 'echarts/renderers';
  import { BarChart } from 'echarts/charts';
  import { GridComponent, TooltipComponent } from 'echarts/components';
  import VChart from 'vue-echarts';
  import { getSaleroomList } from '@/api/dashboard/analysis';
  import { echartsMixin } from '@/utils/echarts-mixin';

  use([CanvasRenderer, BarChart, GridComponent, TooltipComponent]);

  export default {
    components: { VChart },
    mixins: [echartsMixin(['saleChart'])],
    data() {
      return {
        // 销售量搜索参数
        saleSearch: {
          type: 'saleroom',
          dateType: 0,
          datetime: ''
        },
        // 销售量趋势数据
        saleroomData1: [],
        // 访问量趋势数据
        saleroomData2: [],
        // 门店排名数据
        saleroomRankData: [
          { name: '工专路 1 号店', value: '323,234' },
          { name: '工专路 2 号店', value: '323,234' },
          { name: '工专路 3 号店', value: '323,234' },
          { name: '工专路 4 号店', value: '323,234' },
          { name: '工专路 5 号店', value: '323,234' },
          { name: '工专路 6 号店', value: '323,234' },
          { name: '工专路 7 号店', value: '323,234' }
        ],
        // 销售额柱状图配置
        saleChartOption: {}
      };
    },
    computed: {
      // 是否开启响应式布局
      styleResponsive() {
        return this.$store.state.theme.styleResponsive;
      }
    },
    created() {
      this.getSaleroomData();
    },
    methods: {
      /* 获取销售量数据 */
      getSaleroomData() {
        getSaleroomList()
          .then((data) => {
            this.saleroomData1 = data.list1;
            this.saleroomData2 = data.list2;
            this.onSaleTypeChange();
          })
          .catch((e) => {
            this.$message.error(e.message);
          });
      },

      /* 销售量tab选择改变事件 */
      onSaleTypeChange() {
        const isSale = this.saleSearch.type === 'saleroom';
        const data = isSale ? this.saleroomData1 : this.saleroomData2;
        this.saleChartOption = {
          tooltip: {
            trigger: 'axis'
          },
          xAxis: [
            {
              type: 'category',
              data: data.map((d) => d.month)
            }
          ],
          yAxis: [
            {
              type: 'value'
            }
          ],
          series: [
            {
              type: 'bar',
              data: data.map((d) => d.value)
            }
          ]
        };
      }
    }
  };
</script>

<style lang="scss" scoped>
  /* 销售额、访问量工具栏 */

  .titleCard {
    &::before {
      content: url('../../../../static/svg/userStatistics.svg');
      display: inline-block;
      vertical-align: middle;
      margin-right: 2px;
      padding-left: 9px;
    }
  }
  .demo-monitor-tool {
    padding: 0 20px;

    .demo-monitor-tabs {
      height: 51px;
    }

    :deep(.el-tabs__item) {
      height: 51px;
      line-height: 51px;
      font-size: 15px;
    }

    :deep(.el-tabs__nav-wrap:after) {
      display: none;
    }
  }

  /* 小标题 */
  .demo-monitor-title {
    padding: 0 20px;
    margin: 15px 0 5px 0;
  }

  /* 排名 item */
  .demo-monitor-rank-item {
    padding: 0 20px;
    line-height: 20px;
    margin-top: 18px;
  }
</style>
